<template>
  <div class="container">
    <van-form @submit="onSubmit" validate-trigger="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="secret_answer"
          label="密保"
          placeholder="密保"
          :rules="[{ required: true, message: '请填写密保' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="修改密码"
          placeholder="修改密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { passwordUpdate } from "@/api/user";
import {showConfirmDialog} from 'vant'
import {removeToken} from '@/utils/token'
import {useRouter} from 'vue-router'

let username = ref("");
let password = ref("");


let router=useRouter()
//提交 修改密码
let onSubmit = (formData) => {
  showConfirmDialog({
    title: "",
    message:
      "是否确认重置密码",
  })
    .then(async() => {
      console.log(formData);
      await passwordUpdate(formData);
      //成功清楚token 返回登录页
      removeToken();
      showSuccessToast('密码重置成功');
      router.replace('/login')
    })
    .catch(() => {});
};
</script>

<style scoped lang="scss">
.van-cell-group--inset {
  margin: 0;
}

.container {
  margin-top: 5px;
}
</style>